<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			/*属性选择器,选择存在v-cloak的属性元素*/
			[v-cloak] {
			  display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 首先将v-colak属性的元素进行隐藏,在vue实例加载完成之后,v-cloak属性会被移除 -->
			<h1 v-cloak>{{content}}</h1>
			<h1 v-text="content"></h1>
			<h1 v-pre>{{content}}</h1>
			<div v-pre>
				<ul>
					<li>ul-li-1</li>
					<li>ul-li-2</li>
					<li>ul-li-3</li>
					<li>ul-li-4</li>
					<li>ul-li-5</li>
					<li>ul-li-6</li>
					<li>ul-li-7</li>
					<li>ul-li-8</li>
					<li>ul-li-9</li>
					<li>ul-li-10</li>
				</ul>
			</div>
		</div>
		
		<script>
			let vm=new Vue({
				el:"#app",
				data:{
					content:"Haoren!!"
				}
			});
		</script>
	</body>
</html>
